<template>
  <view class="container">
    <view class="att-cpy" v-for="item in companyTest" :key="item.comp_id">
      <view class="att-cpy-item">
        <image class="att-avt" :src="item.comp_img" mode=""></image>
        <view class="info-box">
          <view class="cpybasic">
            <view class="cpy-name">{{item.comp_name}}</view>
          </view>
          <view class="cpy-other"><text class="other-txt">{{item.comp_tenet}}</text></view>
          <view class="cpy-skill"><text class="skill-txt" v-for="(obj,index) in item.comp_skill" :key="index">{{obj}}</text></view>
        </view>
      </view>
      <view class="cpy-address other-txt">{{item.comp_address}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"att-company",
    data() {
      return {
        defaultImg:'https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500',
        companyTest:[
          {
            comp_id:0,
            comp_name:'湖南金管家服务公司',
            comp_img:'https://img2.baidu.com/it/u=2950743974,1818904422&fm=253&fmt=auto&app=138&f=JPEG?w=216&h=216',
            comp_skill:['协会成员','经验丰富','米饭一流'],
            comp_tenet:'有啥需求尽管提，包您满意！',
            comp_address:'湖南省长沙市天心区托尼洗剪吹1523号'
          },{
            comp_id:1,
            comp_name:'少合有宜功服务家政',
            comp_img:'https://img2.baidu.com/it/u=1066002314,4146647274&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=480',
            comp_skill:['协会成员','认识毒菌','少林寺合作伙伴'],
            comp_tenet:'专注服务二十年，满满安全感',
            comp_address:'湖南省衡山县衡山山脚下街3321号'
          },{
            comp_id:2,
            comp_name:'衡靳到家服务公司',
            comp_img:'https://img1.baidu.com/it/u=3884324495,3992631874&fm=253&fmt=auto&app=138&f=JPG?w=236&h=236',
            comp_skill:['协会成员','蓝翔应届生','服务好'],
            comp_tenet:'做了一个违背祖宗的决定，祖上三代都是家政',
            comp_address:'山东省济南市蓝翔技校旁2256号'
          },{
            comp_id:3,
            comp_name:'麻花辫梦幻家政（黔）公司',
            comp_img:'https://img2.baidu.com/it/u=2580781818,3901464256&fm=253&fmt=auto&app=138&f=JPEG?w=398&h=320',
            comp_skill:['协会成员','技能多','会法术'],
            comp_tenet:'诶这里有家政公司 大家快来看看啊',
            comp_address:'河南省菏泽市曹区涠洲北路121号'
          },
        ]
      };
    }
  }
</script>

<style lang="scss">
// 公共样式
.other-txt{
  font-size: 24rpx;
  border-right: 1rpx solid #aaa;
   color: #aaa;
   margin-left: 10rpx;
   padding-right: 20rpx;
   &:first-child{
     margin-left: 0;
   }
   &:last-child{
     border-right: unset;
   }
 }  
 // 主样式
.att-cpy{
    // height: 226rpx;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 10rpx;
    .cpy-address{
      margin: 10rpx 32rpx;
    }
    .att-cpy-item{
      margin: 32rpx;
      display: flex;
      margin-bottom: 0;
      .att-avt{
        height: 160rpx;
        width: 160rpx;
      }
      .info-box{
        flex: 1;
        margin-left: 22rpx;
        .cpybasic{
          display: flex;
          justify-content: space-between;
          font-size: 28rpx
        }
        .cpy-skill{
          margin: 20rpx 0;
          .skill-txt{
            border: 1rpx solid #6f7bcc;
            border-radius: 2em;
            padding: 10rpx;
            margin-right: 20rpx;
            font-size: 20rpx;
            color: #6f7bcc;
          }
        }
      }
    }
}

</style>